<template>
  <van-tabbar fixed route>
    <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
    <van-tabbar-item
      icon="shopping-cart-o"
      to="/home/shopping"
      :badge="total"
      ref="shopping-cart"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item icon="contact-o" to="/my">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  mounted() {
    const dom = this.$refs['shopping-cart'].$el.querySelector('i.van-icon');
    this.$store.commit('setShopCartDom', dom);
  },
  destroyed() {
    this.$store.commit('setShopCartDom', null);
  },
  computed: {
    ...mapGetters(['totalCart']),
    total() {
      if (!this.totalCart) return null;
      if (this.totalCart > 99) return '99+';
      return this.totalCart;
    },
  },
};
</script>

<style>
</style>
